<template>
  <div style="height: 75vh;overflow-y: auto;overflow-x: hidden;">
    <pdf :src="src"></pdf>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components: { pdf },
  data() {
    return {
      src: ''
    }
  },
  created() {
    this.previewPDF()
  },
  methods: {
    //预览pdf
    previewPDF(url) {
      this.src = pdf.createLoadingTask(url)
    },
    //下载PDF
    downloadPDF(url, fileName) {
      this.axios({
        method: 'get',
        responseType: 'arraybuffer',
        url: url
      })
        .then(
          function(res) {
            //调用下载方法，把后端传过来的流传给fileDownload方法
            this.fileDownload(res.data, fileName)
          }.bind(this)
        )
        .catch(
          function(error) {
            this.$Message.error('网络请求出错')
            //调试阶段可以看看报的什么错
            //console.log("error",error)
          }.bind(this)
        )
    },
    fileDownload: function(data, fileName) {
      let blob = new Blob([data], {
        //type类型后端返回来的数据中会有，根据自己实际进行修改
        type: 'application/vnd.ms-excel'
      })
      let filename = fileName || '导出车辆.xls'
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename)
      } else {
        var blobURL = window.URL.createObjectURL(blob)
        // 创建隐藏<a>标签进行下载
        var tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', filename)
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank')
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }
    }
  }
}
</script>
